<template>
  <div class="m-iselect">
    <span class="name">按省份选择:</span>
    <el-select v-model="pvalue" placeholder="省份">
      <el-option
        v-for="item in province"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <el-select v-model="cvalue" :disabled="!city.length" placeholder="城市">
      <el-option v-for="item in city" :key="item.value" :label="item.label" :value="item.value"/>
    </el-select>
    <!-- 远程搜索 -->
    <el-autocomplete
      v-model="input"
      :fetch-suggestions="querySearchAsync"
      placeholder="请输入城市中文或拼音"
      @select="handleSelect"
    />
  </div>
</template>

<script>
import _ from "lodash";
export default {
  data() {
    return {
      city2: [
        {
          id: "110000",
          value: [{ province: "北京市", name: "市辖区", id: "110100" }]
        },
        {
          id: "130000",
          value: [
            { province: "河北省", name: "石家庄市", id: "130100" },
            { province: "河北省", name: "唐山市", id: "130200" },
            { province: "河北省", name: "秦皇岛市", id: "130300" },
            { province: "河北省", name: "邯郸市", id: "130400" },
            { province: "河北省", name: "邢台市", id: "130500" },
            { province: "河北省", name: "保定市", id: "130600" },
            { province: "河北省", name: "张家口市", id: "130700" },
            { province: "河北省", name: "承德市", id: "130800" },
            { province: "河北省", name: "沧州市", id: "130900" },
            { province: "河北省", name: "廊坊市", id: "131000" },
            { province: "河北省", name: "衡水市", id: "131100" },
            { province: "河北省", name: "省直辖县级行政区划", id: "139000" }
          ]
        },
        {
          id: "140000",
          value: [
            { province: "山西省", name: "太原市", id: "140100" },
            { province: "山西省", name: "大同市", id: "140200" },
            { province: "山西省", name: "阳泉市", id: "140300" },
            { province: "山西省", name: "长治市", id: "140400" },
            { province: "山西省", name: "晋城市", id: "140500" },
            { province: "山西省", name: "朔州市", id: "140600" },
            { province: "山西省", name: "晋中市", id: "140700" },
            { province: "山西省", name: "运城市", id: "140800" },
            { province: "山西省", name: "忻州市", id: "140900" },
            { province: "山西省", name: "临汾市", id: "141000" },
            { province: "山西省", name: "吕梁市", id: "141100" }
          ]
        },
        {
          id: "220000",
          value: [
            { province: "吉林省", name: "长春市", id: "220100" },
            { province: "吉林省", name: "吉林市", id: "220200" },
            { province: "吉林省", name: "四平市", id: "220300" },
            { province: "吉林省", name: "辽源市", id: "220400" },
            { province: "吉林省", name: "通化市", id: "220500" },
            { province: "吉林省", name: "白山市", id: "220600" },
            { province: "吉林省", name: "松原市", id: "220700" },
            { province: "吉林省", name: "白城市", id: "220800" },
            { province: "吉林省", name: "延边朝鲜族自治州", id: "222400" }
          ]
        },
        {
          id: "210000",
          value: [
            { province: "辽宁省", name: "沈阳市", id: "210100" },
            { province: "辽宁省", name: "大连市", id: "210200" },
            { province: "辽宁省", name: "鞍山市", id: "210300" },
            { province: "辽宁省", name: "抚顺市", id: "210400" },
            { province: "辽宁省", name: "本溪市", id: "210500" },
            { province: "辽宁省", name: "丹东市", id: "210600" },
            { province: "辽宁省", name: "锦州市", id: "210700" },
            { province: "辽宁省", name: "营口市", id: "210800" },
            { province: "辽宁省", name: "阜新市", id: "210900" },
            { province: "辽宁省", name: "辽阳市", id: "211000" },
            { province: "辽宁省", name: "盘锦市", id: "211100" },
            { province: "辽宁省", name: "铁岭市", id: "211200" },
            { province: "辽宁省", name: "朝阳市", id: "211300" },
            { province: "辽宁省", name: "葫芦岛市", id: "211400" }
          ]
        },
        {
          id: "310000",
          value: [{ province: "上海市", name: "市辖区", id: "310100" }]
        }
      ],
      province: [],
      pvalue: "",
      city: [],
      cvalue: "",
      input: "",
      cities: []
    };
  },
  mounted: async function() {
    let self = this;
    //let {status,data:{province}}=await self.$axios.get('/geo/province')
    let {status, data:{province}} =await this.$http.get('data/provinces.json').then(res=>{return res});
    if (status === 200) {
      self.province = province.map(item => {
        return {
          value: item.id,
          label: item.value
        };
      });
    }
    //console.log(self.province, "self.province");
  },
  watch: {
    pvalue: async function(newPvalue) {
      let self = this;
      //console.log(newPvalue,123)
      //let {status,data:{city}}=await self.$axios.get(`/geo/province/${newPvalue}`)
      //数据处理
      let res2=null
      await this.$http.get('data/maps.json').then(res=>{
        let allCity=res.data.city.filter(onecity => { return onecity.id === newPvalue })[0].value
        let allCity2 =[]
        for(let val in allCity){
          allCity2.push({id:val,name:allCity[val]})
        }
        //console.log(allCity2,"allCity2")
        res.data.city = allCity2
        res2 = res
      });
      let {status,data: { city }} = res2;
      if (status === 200) {
        self.city = city.map(item => {
          return {
            value: item.id,
            label: item.name
          };
        });
        //console.log(self.city,"self.city")
        self.cvalue = "";
      }
    }
  },
  methods: {
    //
    querySearchAsync: _.debounce(async function(query, cb) {
      let self = this;
      if (self.cities.length) {
        cb(self.cities.filter(item => item.value.indexOf(query) > -1));
      } else {
        //let {status,data:{city}}=await self.$axios.get('/geo/city')
        let {status,data: { city }} = await this.$http.get('data/cities1.json').then(res=>{return res});
        //console.log(city, 44);
        if (status === 200) {
          self.cities = city.map(item => {
            return {
              value: item.name
            };
          });
          //console.log(self.cities,9999)
          cb(self.cities.filter(item => item.value.indexOf(query) > -1));
        } else {
          cb([]);
        }
      }
    }, 200),
    handleSelect: function(item) {
      //远程搜索点击事件
      console.log(item.value);
    }
  }
};
</script>

<style lang="scss">
@import "@/assets/iselect.scss";
</style>
